<template>
	<view class="casemain">
		<view class="topic" v-text="item.caseMainTitle"></view>
		<view class="sub" v-if="item.caseSubTitle" v-text="item.caseSubTitle"></view>
		<view class="txt" v-if="item.caseText" v-text="item.caseText"></view>
		<view class="imgs">
			<image v-for="img in item.caseMainImgs" :key="img.attId" class="cover" mode="widthFix" :src="img.url"></image>
		</view>
	</view>
</template>

<script>
	import {get_case_main, apiBase} from '../../request/index.js'
	export default {
		onLoad(options) {
			this.caseId = options.caseId;
			this.get_case_main();
		},
		data() {
			return {
				caseId : "",
				item : {}
			}
		},
		onShow() {
			
		},
		methods: {
			async get_case_main (){
				try{
					const res = await get_case_main(this.caseId);
					if(res.success){
						this.item = res.data;
						this.item.caseMainImgs.forEach(d => {
							d.url = apiBase + d.url;
						});
					}
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style>
.casemain{
	padding: 25rpx 25rpx 40rpx;
}

.casemain .topic{
	font-weight: bold;
	font-size: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	margin-bottom: 20rpx
}

.casemain .sub{
	margin-bottom: 20rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: rgb(242, 114, 54);
}

.casemain .txt{
}

.casemain .imgs .cover{
	width: 100%;
	margin-top: 40rpx;
}
</style>
